<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据的绑定和事件的添加</title>
</head>
<body>
<!--
指令
    v-bind:href 简写 :href  为href绑定事件 属性
    v-on:click 简写@click 方法
-->
<div id="app">
    <p>{{msg}}</p>
<!--一旦用了指令 那么被指令的属性 属性值就是js代码 而原本的""不在代码字符串的边界,而是代表js的边界-->
<!--    <a v-bind:href="url">点击去学习</a>-->
<!--  单向数据绑定指令的简写  -->
    <a :href="url">点击去学习</a>
<!-- 添加事件监听的简写   -->
    <button @click="test">点我</button>
</div>

<script src="js/vue.js"></script>
<script>
    const vm=new Vue({
        el:'#app',
        data:{
            //专门用来写属性数据的
            msg:'i love you',
            url:'http://www.atguigu.com',
        },
        methods:{
            //这里专门用来写函数 无论是data里面数据 还是methods当中方法,最终都会被vm代理
            test(){
                alert('嘿嘿');
            }

        }
    });
</script>
</body>
</html>